<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>layout 后台大布局 - Layui</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header"><header th:replace="common/header :: header"></header></div>
    <div class="layui-side layui-bg-black"><div class="layui-side-scroll"><aside th:replace="common/side :: sider"></aside></div></div>

    <div class="layui-body">
        <div class="demoTable" style="padding: 15px 5px;">
            搜索用户名：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <div class="layui-footer"><footer th:replace="common/footer :: footer"></footer></div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">批量删除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/layui/layui.js}"></script>

<script type="text/javascript" th:inline="none">
    var tableRender;
    layui.use('table', function(){
        var table = layui.table;
        tableRender = table.render({
            elem: '#test'
            ,url:'/api/user/list'
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'username', title:'用户名', width:120}
                ,{field:'age', title:'年龄', width:120}
                ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                        return '<em>'+ res.email +'</em>'
                    }}
                ,{field:'sex', title:'性别', width:80, edit: 'text', templet: function (res) {
                        if (res.sex == 1) {
                            return '<em>'+ '男' +'</em>';
                        } else {
                            return '<em>'+ '女' +'</em>';
                        }
                    }}
                ,{field:'city', title:'城市', width:100}
                ,{field:'sign', title:'签名'}
                ,{field:'experience', title:'积分', width:80, sort: true}
                ,{field:'ip', title:'IP', width:120}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,id: 'test'
            ,page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        username: $("#demoReload").val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    layer.open({
                        type : 2,
                        title : '新增',
                        maxmin : true,
                        shadeClose : false, // 点击遮罩关闭层
                        area : [ '600px', '600px' ],
                        content : '/user/add/' // iframe的url
                    });
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    var idArr = [];
                    for (var i = 0; i < data.length; i++) {
                        idArr.push(data[i].id);
                    }

                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url: "/api/user/batchDelete",
                            data: {ids: JSON.stringify(idArr)},
                            type: 'post',
                            success: function (data) {
                                layer.close(index);
                                //执行重载
                                table.reload('test', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                    ,where: {
                                        username: $("#demoReload").val()
                                    }
                                }, 'data');
                            },
                            error: function (data) {
                                var responseMsg = JSON.parse(data.responseText);
                                alert(responseMsg.message);
                            }
                        });
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: "/api/user/delete/" + data.id ,
                        type: 'get',
                        success: function (data) {
                            layer.close(index);
                            //执行重载
                            table.reload('test', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                                ,where: {
                                    username: $("#demoReload").val()
                                }
                            }, 'data');
                        },
                        error: function (data) {
                            var responseMsg = JSON.parse(data.responseText);
                            alert(responseMsg.message);
                        }
                    });

                });
            } else if(obj.event === 'edit'){

                layer.open({
                    type : 2,
                    title : '编辑',
                    maxmin : true,
                    shadeClose : false, // 点击遮罩关闭层
                    area : [ '600px', '600px' ],
                    content : '/user/edit/' + data.id // iframe的url
                });
            }
        });
    });
</script>
</body>
</html>